<template>
<div class="design-item-list" :class="{heightLight : current == headerForm.itemId}">
	<div class="design-header">
		<div class="design-title">{{headerForm.title || "点击编辑页面名称和分享" }}</div>
	</div>
	<div class="design-edit" v-show="(current == headerForm.itemId) && headerForm.toolbarEdit && !headerForm.toolbarComponents">
		<h4 class="edit-title"><span>页面编辑</span></h4>
		<el-form :model="headerForm" :rules="rules" ref="form" label-width="80px" class="demo-headerForm">
			<el-form-item label="页面名称" prop="title">
				<el-input v-model="headerForm.title" maxlength="10" placeholder="请输入标题名称，不超过10个字" @input="changeStatus(headerForm)"></el-input>
			</el-form-item>
			<el-form-item label="页面分享">
				<el-switch v-model="headerForm.shareType" active-text="开" inactive-text="关" @change="changeStatus(headerForm)"></el-switch>
			</el-form-item>
			<el-form-item label="分享标题" v-if="headerForm.shareType">
				<el-input v-model="form.shareTitle" placeholder="请输入分享标题" @input="changeStatus(headerForm)"></el-input>
			</el-form-item>
			<el-form-item label="分享描述" v-if="headerForm.shareType">
				<el-input v-model="form.shareDetail" placeholder="请输入分享描述" @input="changeStatus(headerForm)"></el-input>
			</el-form-item>
			<el-form-item label="分享图片" v-if="headerForm.shareType">
					<div class="el-upload-list el-upload-list--picture-card" v-show="headerForm.shareImg">
						<div class="el-upload-list__item is-success">
							<img class="el-upload-list__item-thumbnail" width="110" :src="headerForm.shareImg">
							<label class="el-upload-list__item-status-label">
									<i class="el-icon-upload-success el-icon-check"></i>
							</label>
							<span class="el-upload-list__item-actions">
								<span class="el-upload-list__item-delete">
									<i class="el-icon-delete" @click.stop="handleRemove(headerForm)"></i>
								</span>
							</span>
						</div>
					</div>
					<el-upload
						class="upload-demo"
						:action="this.globalVar.uploadFile"
						:show-file-list="false"
						accept="image/jpeg,image/jpg,image/png"
						:on-success="imageUploadSuccess"
						:before-upload="beforeUpload"
						v-show="!headerForm.shareImg">
						<i class="el-icon-upload"></i>
						<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						<div class="el-upload__tip" slot="tip">建议图片尺寸420X420，单张图片100kb以内</div>
					</el-upload>
			</el-form-item>
		</el-form>
	</div>
</div>
</template>
<script>
export default {
    data () {
        return {
            rules: {
                title: [
                    { required: true, message: '请输入页面名称', trigger: 'change' },
                    { min: 1, max: 10, message: '10', trigger: 'change' }],
			},
			form: JSON.parse(JSON.stringify(this.headerForm))
        }
    },
    props:{
		headerForm: {
			type: Object,
			default() {
				return {}
			}
		},
		current: String
    },
    created(){},
	methods:{
		imageUploadSuccess(res) {
			this.headerForm.shareImg = res.url;
			this.$emit("childChange", this.headerForm);
		},
		beforeUpload(file) {
			// console.log('file.size', file.size)
			// var imageSize = file.size / 1024 * 100 < 100;//上传图片大小不超过1M
			// if (!imageSize) {
			// 	this.$message.error('上传封面大小不能超过 1MB!');
			// }
			// return imageSize;
		},
		handleRemove() {
			this.headerForm.shareImg = '';
			this.$emit("childChange", this.headerForm);
		},
		changeStatus(form){
			this.validateForm();
			this.$emit("childChange",form);
			// console.log('子form',form);
		},
		validateForm(){
			this.$refs.form.validate((valid) =>{
				if (valid){
					return true;
				}else{
					this.$notify.error({
						title: '错误',
						message: '请输入页面名称'
					});
					return false;
				} 
			})
		},
	},
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import "../../../../static/css/style.less";
@import "../../../../static/css/element.less";
</style>